<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .inner-box{
            width: 100px;
            height: 110px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner-box">inner-box</div>
    </div>
    <ul>
        <li class="li">li_1</li>
        <li class="li">li_2</li>
        <li class="li-3">li_3</li><!-- 注释部分 -->
        <li class="li">li_4</li>
        <li class="li">li_5</li>
    </ul>
    <script>
        // 获取父节点
        var innerBoxDom = document.getElementsByClassName('inner-box')[0];
        var parentDom = innerBoxDom.parentNode;
        console.log('parentDom', parentDom);

        // 下一个兄弟节点
        // nextElementSibling下一个Dom节点，
        // nextSibling下一个节点包括：空格 回车 注释
        var liDom = document.getElementsByClassName('li-3')[0];
        var nextLiDom = liDom.nextElementSibling || liDom.nextSibling;
        console.log(nextLiDom);

        // 上一个兄弟节点
        var previousLiDom = liDom.previousElementSibling || liDom.previousSibling;
        console.log(previousLiDom);

        // 获取子节点
        var ulDom = document.getElementsByTagName('ul')[0];
        var liFirstDom = ulDom.firstElementChild || ulDom.firstChild;
        console.log(liFirstDom);

        // 获取所有子节点
        var liDoms = ulDom.children; // Dom孩子
        var liDom = ulDom.childNodes; // 所有孩子
        console.log(liDoms);
    </script>
</body>
</html>